<template>
    <ElCard class="h-full flex flex-col min-h-0" body-class="flex flex-col min-h-0 flex-1">
        <template #header>
            <p class="text-center font-bold text-2xl">额度管理</p>
        </template>
        <ElCard class="flex flex-col min-h-0" body-class="flex flex-col min-h-0 flex-1">
            <template #header>
                <p class="text-center font-bold text-xl">额度申请</p>
            </template>
            <ElForm>
                <ElFormItem label="申请额度">
                    <ElInput v-model="apply" placeholder="请输入金额" />
                </ElFormItem>
                <ElFormItem>
                    <ElText class="mx-1" type="danger">*此额度是申请共用额度,申请后需要该课程老师同意方可申请到个人额度中</ElText>
                </ElFormItem>
                <ElFormItem>
                    <ElButton class="w-full" type="primary" @click="applyLimitAPI">确定</ElButton>
                </ElFormItem>
            </ElForm>
        </ElCard>
        <ElCard class="flex flex-col min-h-0" body-class="flex flex-col min-h-0 flex-1">
            <template #header>
                <p class="text-center font-bold text-xl">额度转让</p>
            </template>
            <ElForm ref="ruleFormRef" :rules="rule" :model="form">
                <ElFormItem label="请输入对方账号" prop="account">
                    <ElInput v-model="form.account" placeholder="请输入对方账号"></ElInput>
                </ElFormItem>
                <ElFormItem label="请选择公司" prop="classroomId">
                    <ElSelect @change="getCourseAPI(form.classroomId)" v-model="form.classroomId" placeholder="请选择公司"
                        :options="classList" :props="{ label: 'name', value: 'id' }"></ElSelect>
                </ElFormItem>
                <ElFormItem label="请选择部门" prop="courseId">
                    <ElSelect v-model="form.courseId" placeholder="请选择部门" :options="courseList"
                        :props="{ label: 'name', value: 'id' }"></ElSelect>
                </ElFormItem>
                <ElFormItem label="请输入额度数量" prop="limit">
                    <ElInput v-model="form.limit" placeholder="请输入额度数量"></ElInput>
                </ElFormItem>
                <ElFormItem>
                    <ElButton class="w-full" type="primary" @click="submit">确定</ElButton>
                </ElFormItem>
            </ElForm>
        </ElCard>
    </ElCard>
</template>

<script setup lang='ts' name=''>
import { appliLimit, transLimit } from '@/api/function';
import { getClass, getCourse } from '@/api/login';
import { ElCard, ElForm, ElFormItem, ElInput, ElButton, ElText, ElMessage, ElSelect } from 'element-plus';
import { ref } from 'vue'

const apply = ref()
async function applyLimitAPI() {
    const res:any = await appliLimit(apply.value)
    if (res.code == 200) {
        ElMessage.success(res.msg)
        apply.value = ''
    } else {
        ElMessage.error(res.msg)
    }
}

const ruleFormRef = ref()
const form = ref({
    account: undefined,
    classroomId: undefined,
    courseId: undefined,
    limit: undefined
})
const classList = ref([])
const courseList = ref([])
getClass().then(res => {
    console.log(res.data)
    classList.value = res.data
    form.value.classroomId = res.data[0].id
    getCourseAPI(res.data[0].id)
})
async function getCourseAPI(classroomId: any) {
    await getCourse(classroomId).then(res => {
        courseList.value = res.data
        form.value.courseId = res.data[0].id
    })
}
const rule = {
    account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
    classroomId: [{ required: true, message: '请选择公司', trigger: 'change' }],
    courseId: [{ required: true, message: '请选择部门', trigger: 'change' }],
    limit: [{ required: true, message: '请输入额度', trigger: 'blur' }]
}
async function submit() {
    ruleFormRef.value.validate().then(async () => {
        transLimit({
            account: form.value.account,
            classroomId: form.value.classroomId,
            courseId: form.value.courseId,
            limit: form.value.limit
        }).then((res:any) => {
            if (res.code == 200) {
                ElMessage.success("转让成功")
                ruleFormRef.value.resetFields()
            }
        })
    })
}
</script>

<style scoped></style>